<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="php-apidoc - apid documenation generator">
    <meta name="author" content="Calin Rada">
    <title>php-apidoc v {{ version }}</title>
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
        body      { padding-top: 70px; margin-bottom: 15px; }
        .tab-pane { padding-top: 10px; }
        .mt0      { margin-top: 0px; }
        .footer   { font-size: 12px; color: #666; }
        .label    { display: inline-block; min-width: 65px; padding: 0.3em 0.6em 0.3em; }
        .string   { color: green; }
        .number   { color: darkorange; }
        .boolean  { color: blue; }
        .null     { color: magenta; }
        .key      { color: red; }
        .popover  { max-width: 400px; max-height: 400px; overflow-y: auto;}
        code     { white-space: pre-wrap!important;padding:5px!important; }
    </style>
</head>
<body>
    <!-- Fixed navbar -->
    <div class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">php-apidoc</a>
        </div>
        <div class="navbar-collapse collapse">
            <form class="navbar-form navbar-right">
                <div class="form-group">
                    Api key: <a href="javascript:void(0);" class="tooltipP" data-toggle="tooltip" title="Api key header with api key (key) and api key value (value) "><span class="glyphicon glyphicon-info-sign"></span></a>
                </div>
                <div class="form-group">
                    <input type="text" class="form-control input-sm" placeholder="key" id="apikey_key">
                </div>
                <div class="form-group">
                    <input type="text" class="form-control input-sm" placeholder="value" id="apikey_value">
                </div>
            </form>
        </div><!--/.nav-collapse -->
      </div>
    </div>

    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h5>Api URL</h5>
                <input id="apiUrl" type="text" class="form-control input-sm" placeholder="http://api.mydomain.tld">
            </div>
        </div>
        <hr>
        <div class="panel-group" id="accordion">
            {{ content }}
        </div>
        <hr>

        <div class="row mt0 footer">
            <div class="col-md-6" align="left">
                Generated on {{ date }}
            </div>
            <div class="col-md-6" align="right">
                <a href="https://github.com/calinrada/php-apidoc" target="_blank">php-apidoc v {{ version }}</a>
            </div>
        </div>

    </div> <!-- /container -->

    <script src="http://libs.useso.com/js/jquery/1.10.2/jquery.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <script type="text/javascript">
    function syntaxHighlight(json) {
        if (typeof json != 'string') {
            json = JSON.stringify(json, undefined, 2);
        }
        json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
        return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function(match) {
            var cls = 'number';
            if (/^"/.test(match)) {
                if (/:$/.test(match)) {
                    cls = 'key';
                } else {
                    cls = 'string';
                }
            } else if (/true|false/.test(match)) {
                cls = 'boolean';
            } else if (/null/.test(match)) {
                cls = 'null';
            }
            return '<span class="' + cls + '">' + match + '</span>';
        });
    }

    $(document).ready(function() {

        $('#php-apidoctab a').click(function(e) {
            e.preventDefault()
            $(this).tab('show')
        });

        $('.tooltipP').tooltip({
            placement: 'bottom'
        });

        $('code[id^=response]').hide();

        $.each($('pre[id^=sample_response]'), function() {
            if ($(this).html() == 'NA') {
                return;
            }
            var str = JSON.stringify(JSON.parse($(this).html().replace(/'/g, '"')), undefined, 4);
            $(this).html(syntaxHighlight(str));
        });

        $("[data-toggle=popover]").popover({placement:'right'});

        $('body').on('shown.bs.popover', function() {
            var $sample = $(this).find(".popover-content");
            if ($sample.html() == 'NA') {
                return;
            }
            var str = JSON.stringify(JSON.parse($sample.html().replace(/'/g, '"')), undefined, 2);
            $sample.html('<pre>' + syntaxHighlight(str) + '</pre>');
        });

        $('body').on('click', '.send', function(e) {
            e.preventDefault();
            var form = $(this).closest('form');
            var matchedParamsInRoute = $(form).attr('action').match(/{\w+}$/);
            var theId = $(this).attr('rel');
            if (matchedParamsInRoute) {
                $("form#" + $(form).attr('id') + " input[type=text]").each(function() {
                    var input = $(this);
                    var index;
                    for (index = 0; index < matchedParamsInRoute.length; ++index) {
                        try {
                            var tmp = matchedParamsInRoute[index].replace('{', '').replace('}', '');
                            if ($(this).attr('id') == tmp) {
                                var newFormAction = $(form).attr('action').replace(matchedParamsInRoute[index], $(this).val());
                                $(form).attr('action', newFormAction);
                            }
                        } catch (err) {
                            console.log(err);
                        }
                    }
                });
            };
            var st_headers = {};
            st_headers[$('#apikey_key').val()] = $('#apikey_value').val();
            $.ajax({
                url: $('#apiUrl').val() + $(form).attr('action'),
                data: $(form).serialize(),
                type: '' + $(form).attr('method') + '',
                dataType: 'json',
                headers: st_headers
            }).done(function(data) {
                if (typeof data === 'object') {
                    $('#response' + theId).html(JSON.stringify(data));
                } else {
                    $('#response' + theId).html(data);
                }
                $('#response' + theId).show();
            }).error(function(xhr, textStatus, error) {
                $('#response' + theId).html(textStatus);
                $('#response' + theId).show();
            });
            return false;
        });
    });
    </script>
</body>
</html>
